<template>
    <div class="report">
        <i class="iconfont icon-guanbi1" @click="toReport"></i>
        <div class="overlay" v-show="toReportt" @click="toReportt = false">
            <div class="content" v-show="toReportt" @click.stop="toReportt = true">
                <p class="title">举报</p>
                <div class="reason">
                    <van-radio-group v-model="checked" v-show="toReportt" @click.stop="toReportt = true">
                        <van-cell-group inset>
                            <van-cell v-for="(msg,index) in messageList" :key="index" :title="msg" clickable @click="checked = index">
                                <template #right-icon>
                                    <van-radio :name="index"/>
                                </template>
                            </van-cell>
                        </van-cell-group> 
                    </van-radio-group>
                </div>
                <div class="reportBottom">
                    <button @click.stop="submit(bodyId,reportedId)">提交</button>
                </div>
            </div> 
        </div>
    </div>
</template>

<script>
import axios from 'axios'
    import { Toast } from 'vant';
import jwtDecode from 'jwt-decode'
 
export default {
    name:'Report',
    props:['bodyId','reportedId'],
    data() {
        return {
            toReportt:false,
            checked:0,
            decode:null,
            messageList:['血腥暴力','恶意伤人','煽风点火','信息虚假','色情低俗','涉嫌抄袭',],
            login:null
        }
    },
    mounted(){
        if(sessionStorage.getItem('token')){
            let token=sessionStorage.getItem("token")
            this.decode = jwtDecode(token);
            this.login = true
        }else{
            this.login = false
        }
    },
    methods: {
        toReport(){
            if(this.login){
                this.toReportt = true
            }else{
                Toast('请先登录或注册')
            }
        },
        submit(bodyId,reportedId){
            const reportParam = new URLSearchParams()
            reportParam.append('bodyId',String(bodyId))
            reportParam.append('reason',this.messageList[this.checked])
            reportParam.append('reportId',String(this.decode.userId))
            reportParam.append('reportedId',String(reportedId))
            axios({
                url:'/report/reportAPost',
                method:'post',
                data:reportParam,
                headers:{
                    'Authentication-Token':JSON.parse(sessionStorage.getItem("token"))
                }
            }).then(data=>{
                console.log(data)
                if(data.data.code === 20000){
                      this.toReportt = false
                    Toast('已提交，将尽快反馈处理结果');
                }else{
                    this.toReportt = false
                    Toast(data.data.data)
                }
            }).catch(err=>{  
                console.log(err)
            })
            // Toast('举报成功');
        }
    },
}
</script>

<style lang="less" scoped>
    .report{
        display: flex;
        align-items: center;
        i{
            font-size: 0.55rem;
            color: #4b4b4b;
        }
    }
    .overlay{
        position: fixed;
        top: 0px;
        left: 0px;
        background-color: rgba(0,0,0,.3);
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 99;
        .content{
            background-color: white;
            width: 70vw;
            // height: 50vh;
            border-radius: 10px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            overflow: hidden;
            p.title{
                width:100%;
                font-size: @fontSmall;
                font-weight: bolder;
                text-align: center;
                padding: 0.2rem;

            }
            .reason{
                p{
                    display: block;
                    padding: 0.2rem;
                    text-indent: 1rem;
                    font-size: @fontSmall;
                    color: #303030;
                    border: solid 1px #e9e9e9;
                }
            }
        }
    }
    .reportBottom{
        padding: 0.4rem;
        text-align: center;
        button{
            background-color: white;
            border: solid 1px black;
            border-color: var(--themeColor);
            padding: 0.1rem 0.3rem;
            color: var(--themeColor);
            margin-bottom: 0.5rem;
        }
    }
</style>